<template>
  <div class="app">
    <love-music-player
      :music_url="$store.state.setting.musicFile"
      :music_thumb="$store.state.setting.musicThumb"
      :ref="musicRef"
      class="index-audio"
    />
    <router-view />
  </div>
</template>

<script>
import FastClick from "fastclick";

FastClick.prototype.focus = function (targetElement) {
  var length;

  //兼容处理:在iOS7中，有一些元素（如date、datetime、month等）在setSelectionRange会出现TypeError

  //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性，所以一旦引用就会报错，因此排除这些属性才使用setSelectionRange方法

  if (
    deviceIsIOS &&
    targetElement.setSelectionRange &&
    targetElement.type.indexOf("date") !== 0 &&
    targetElement.type !== "time" &&
    targetElement.type !== "month" &&
    targetElement.type !== "email"
  ) {
    length = targetElement.value.length;

    targetElement.setSelectionRange(length, length);

    /*修复bug ios 11.3不弹出键盘，这里加上聚焦代码，让其强制聚焦弹出键盘*/

    targetElement.focus();
  } else {
    targetElement.focus();
  }
};
window.onload = function () {
  FastClick.attach(document.body);
  document.getElementById("faceoff").style.display = "none";
};
import { LoveMusicPlayer } from "./components";
export default {
  name: "App",
  data() {
    return {
      refData: {},
    };
  },
  async created() {
    await this.$store.dispatch("getSetting");
/*     this.refData.$nextTick(() => {
      this.refData.click_play();
    }); */
  },
  mounted() {
    //设置
    document.getElementById("faceoff").style.display = "";

    document.body.addEventListener("focusout", () => {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        //软键盘收起的事件处理

        setTimeout(() => {
          const scrollHeight =
            document.documentElement.scrollTop || document.body.scrollTop || 0;

          window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 100);
      }
    });
  },
  components: {
    LoveMusicPlayer,
  },

  methods: {
    musicRef(el) {
      this.refData = el;
    },
  },
};
</script>

<style>
.app {
  margin: 0 auto;
}
.index-audio {
  position: fixed;
  right: 0;
  top: 7rem;
  width: 7rem !important;
  height: 7rem !important;
}
.love-button {
  text-align: center;
}
.love-button button {
  font-size: 1.8rem;
  color: #dec852;
  border-radius: 1rem;
  border: #dec852 2px solid;
  padding: 0.5rem;
  outline: none;
  background-color: rgba(222, 91, 82, 0.87);
}
.love-button button:hover {
  border-color: rgba(255, 255, 255, 0);
}
.close {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 9;
  padding: 0;
  margin: 0;
}
.gift-bullet {
  width: 2rem;
  height: 0.5rem;
  margin: 0.5rem 1rem;
  display: inline-block;
  background: #de5b52;
}
.gift-bullet-active {
  background: #5a4398;
  opacity: 1;
}
</style>
